<template>
    <div class="rightFx">
        <!-- <ThemeTitlenew :title="title" /> -->
        <!-- 体制机制建设 -->
        <!-- <div class="geoIntro" style="margin-top: 18px; margin-bottom: 5px"> -->
            <!-- <div class="geoIntroTitle"> -->
                <!-- <div class="sideLine"></div> -->
                <!-- <div class="geoIntroWord">体制机制建设</div> -->
            <!-- </div> -->
        <!-- </div> -->
        <!-- 体制机制建设chart -->
        <!-- <div class="sjbqContent">
            <div
                v-for="(item, index) in sjbqTitle1"
                :class="{ sjbqActive: currentIndex1 == index }"
                :key="index"
                @click="sjbqHandleClick1(index)"
            >
                {{ item.name }}
            </div>
        </div> -->
        <!-- 三级备勤 -->
        <!-- <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="geoIntroWord">三级备勤</div>
            </div>
        </div> -->
        <!-- <div class="sjbqContent1">
            <div
                v-for="(item, index) in sjbqTitle"
                :class="{ sjbqActive: currentIndex == index }"
                :key="index"
                @click="sjbqHandleClick(index)"
            >
                {{ item.name }}
            </div>
        </div> -->
        <!-- 值班值守 -->
        <!-- <div class="geoIntro1">
            <div class="geoIntroTitle">
                <div class="geoIntroWord">值班值守</div>
            </div>
            <div class="todayTudy">
                <div
                    v-for="(item, index) in todayList"
                    :class="{ todayActive: todayIndex == index }"
                    @click="todayHandleClick(index)"
                    :key="index"
                >
                    {{ item.name }}
                </div>
            </div>
        </div> -->
        <!-- 今日值班 -->
        <!-- <div class="todayDuty" v-show="todayIndex == 0">
            <div class="dutyTitle">今日值班</div>
            <div class="dutyLoader">
                <div>
                    <span>当班负责人：</span>
                    <span>{{ people1 }}</span>
                </div>
                <div>
                    <span>值班长：</span>
                    <span>{{ people2 }}</span>
                </div>
            </div>
            <div class="dutyPerson">值班员：{{ people3 }}</div>
        </div> -->
        <!-- <div class="todayDuty" v-show="todayIndex == 1">
            <div class="dutyTitle">今日备勤</div>
            <div class="dutyLoader">
                <div>
                    <span>当班负责人：</span>
                    <span>{{ people11 }}</span>
                </div>
                <div>
                    <span>值班长：</span>
                    <span>{{ people21 }}</span>
                </div>
            </div>
            <div class="dutyPerson">值班员：{{ people31 }}</div>
        </div> -->
        <!-- 突发事件处置 -->
        <!-- <div class="rR">
            <div class="geoIntroTf" style="margin-top: 5px; margin-bottom: 5px">
                <div class="geoIntroTitle"> -->
                    <!-- <div class="sideLine"></div> -->
                    <!-- <div class="geoIntroWord">突发事件处置</div>
                </div>
                <el-select class="inputRightYear" placeholder="请选择年份">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div> -->
            <!-- 突发事件chart   -->
            <!-- <div id="eventChart"></div> -->
            <!-- <div class="threeTitles">
                <div
                    v-for="(item, index) in eventList"
                    :key="index"
                    :class="{ sActive: currentEventIndex == index }"
                    @click="eventThreeHandle(index)"
                >
                    {{ item.name }}
                </div>
            </div> -->
            <!-- 重特大事故发生起数   -->
            <!-- <div class="event" v-show="currentEventIndex == 0 || isBigScreen">
                <div class="eventDec">
                    <div>重特大事故发生起数</div>
                    <div>0</div>
                </div>
                <div id="ZdEvents"></div>
            </div> -->
            <!-- 死亡人数   -->
            <!-- <div class="event" v-show="currentEventIndex == 1 || isBigScreen">
                <div class="eventDec">
                    <div>死亡人数</div>
                    <div>0</div>
                </div>
                <div id="SwPeople"></div>
            </div> -->
            <!-- 减少因灾损失数 -->
            <!-- <div class="event" v-show="currentEventIndex == 2 || isBigScreen">
                <div class="eventDec">
                    <div>减少因灾损失数</div>
                    <div>0</div>
                </div>
                <div id="JsTimes"></div>
            </div> -->
        <!-- </div> -->
        <div class="btn">
            <rightBtn/>
        </div>
    </div>
</template>

<script>
import ThemeTitlenew from "../../common/ThemeTitlenew";
import {
    defineComponent,
    getCurrentInstance,
    onMounted,
    ref,
    provide,
    watch,
    onBeforeUnmount,
    nextTick,
} from "vue";
import { useStore } from "vuex";
import echarts from "echarts";
import axios from "axios";
import rightBtn from '../RightBtn/index.vue'
export default {
    components: {
        ThemeTitlenew,
        rightBtn
    },

    setup() {
        const title = provide("title", "成效展示");
        const store = useStore();
        const options = [
            {
                value: "总体",
                label: "总体",
            },
            {
                value: "2020",
                label: "2020",
            },
            {
                value: "2019",
                label: "2019",
            },
            {
                value: "2018",
                label: "2018",
            },
        ];
        const eventList = [
            { name: "重特大事故发生起数" },
            { name: "死亡人数" },
            { name: "减少因灾损失数" },
        ];
        const numList = [2, 5, 1, 3, 8, 0];
        const todayList = [{ name: "今日值班" }, { name: "今日备勤" }];
        const carouselList = [
            {
                imgSrc: "",
                dec: "海南省是中华人民共和国最南端的省级行政区，北以琼州海峡与广东划界，西临北部湾与广西、越南相对，东濒南海与台湾对望，东南和南部在南海与菲律宾、文莱、马来西亚为邻。",
            },
            {
                imgSrc: "",
                dec: "北以琼州海峡与广东划界，海南省是中华人民共和国最南端的省级行政区，西临北部湾与广西、越南相对，东濒南海与台湾对望，东南和南部在南海与菲律宾、文莱、马来西亚为邻。",
            },
            {
                imgSrc: "",
                dec: "西临北部湾与广西、越南相对，海南省是中华人民共和国最南端的省级行政区，北以琼州海峡与广东划界，东濒南海与台湾对望，东南和南部在南海与菲律宾、文莱、马来西亚为邻。",
            },
        ];

        let optionValue = "";
        let sjbqTitle = [
            { name: "三级备勤等级划分" },
            { name: "森林火灾出勤组" },
            { name: "三防出勤组" },
            { name: "危化品事故出勤组" },
        ];
        let sjbqTitle1 = [
            { name: "厅本级处室设置" },
            { name: "市县应急局设置" },
            { name: "森林防火指挥部设置" },
            { name: "三防指挥部设置" },
        ];
        let currentIndex = ref(-1);
        let currentIndex1 = ref(-1);
        let currentEventIndex = ref(0);
        let todayIndex = ref(0);
        function todayHandleClick(index) {
            todayIndex.value = index;
        }
        function sjbqHandleClick(index) {
            if (currentIndex.value == index) {
                currentIndex.value = -1;
                store.commit("changeDialogState", 0);
            } else {
                currentIndex.value = index;
                store.commit("changeDialogState", index + 1);
            }
        }
        function sjbqHandleClick1(index) {
            if (currentIndex1.value == index) {
                currentIndex1.value = -1;
                store.commit("changeDialogState", 0);
            } else {
                currentIndex1.value = index;
                store.commit("changeDialogState", index + 5);
            }
        }
        //饼图
        let eventCharts = null;
        function drawEvents() {
            var dom = document.getElementById("eventChart");
            eventCharts = echarts.init(dom);
            let option = {
                animation: true,
                title: {
                    text: "突发事件",
                    // "subtext": "火点类型",
                    x: "40%",
                    y: "50%",
                    textStyle: {
                        color: "#fff",
                        fontSize: 14,
                        fontWeight: "normal",
                        align: "center",
                        width: "200px",
                    },
                    subtextStyle: {
                        color: "#fff",
                        fontSize: 14,
                        fontWeight: "normal",
                        align: "center",
                    },
                },
                // legend: {
                //     width: "30%",
                //     left: "right",
                //     textStyle: {
                //         color: "#fff",
                //         fontSize: 12
                //     },
                //     icon: "circle",
                //     right: "0",
                //     bottom: "0",
                //     padding: [10, 30],
                //     itemGap: 20,
                //     data: [" 社会安全事件", "突发事件", "事故灾难", "自然灾害",'公共卫生事件']
                // },
                series: [
                    {
                        type: "pie",
                        center: ["50%", "55%"],
                        radius: ["55%", "80%"],
                        color: ["#2ECACE", "#2039C3", "#0F9AF8", "#2B63D5"],
                        startAngle: 160,
                        labelLine: {
                            normal: {
                                length: 0,
                                length2: 5,
                            },
                        },
                        label: {
                            normal: {
                                formatter: "{b|{b}:}\n{per|{d}%} ",
                                backgroundColor: "rgba(255, 147, 38, 0)",
                                borderColor: "transparent",
                                borderRadius: 4,
                                rich: {
                                    a: {
                                        color: "#999",
                                        lineHeight: 20,
                                        align: "center",
                                    },
                                    hr: {
                                        borderColor: "#aaa",
                                        width: "100%",
                                        borderWidth: 1,
                                        height: 0,
                                    },
                                    b: {
                                        color: "#b3e5ff",
                                        fontSize: 10,
                                        lineHeight: 10,
                                    },
                                    c: {
                                        fontSize: 14,
                                        color: "#eee",
                                    },
                                    per: {
                                        color: "#FDF44E",
                                        fontSize: 10,
                                        padding: [1, 1],
                                        borderRadius: 2,
                                    },
                                },
                                textStyle: {
                                    color: "#fff",
                                    fontSize: 12,
                                },
                            },
                        },
                        emphasis: {
                            show: false,
                            position: [30, 50],
                            label: {
                                show: true,
                                formatter: "{b|{b}:}  {per|{d}%}  ",
                                backgroundColor: "rgba(255, 147, 38, 0)",
                                borderColor: "transparent",
                                borderRadius: 4,
                                rich: {
                                    a: {
                                        color: "#999",
                                        lineHeight: 22,
                                        align: "center",
                                    },
                                    hr: {
                                        borderColor: "#aaa",
                                        width: "100%",
                                        borderWidth: 0,
                                        height: 0,
                                    },
                                    b: {
                                        color: "#fff",
                                        fontSize: 10,
                                        lineHeight: 12,
                                    },
                                    c: {
                                        fontSize: 14,
                                        color: "#eee",
                                    },
                                    per: {
                                        color: "#FDF44E",
                                        fontSize: 10,
                                        padding: [1, 1],
                                        borderRadius: 0,
                                    },
                                },
                            },
                        },
                        data: [
                            {
                                name: "社会安全事件",
                                value: 9,
                            },
                            {
                                name: "突发事件",
                                value: 47,
                            },
                            {
                                name: "事故灾难",
                                value: 55,
                            },
                            {
                                name: "自然灾害",
                                value: 24,
                            },
                            {
                                name: "公共卫生事件",
                                value: 3,
                            },
                        ],
                    },
                    {
                        type: "pie",
                        center: ["50%", "55%"],
                        radius: ["45%", "47%"],
                        label: {
                            show: false,
                        },
                        data: [
                            {
                                value: 78,
                                name: "实例1",
                                itemStyle: {
                                    normal: {
                                        color: {
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 0,
                                            type: "linear",
                                            global: false,
                                            // colorStops: [{
                                            //     offset: 0,
                                            //     color: "#9F17FF"
                                            // }, {
                                            //     offset: 0.2,
                                            //     color: "#01A4F7"
                                            // }, {
                                            //     offset: 0.5,
                                            //     color: "#FE2C8A"
                                            // }, {
                                            //     offset: 0.8,
                                            //     color: "#FEE449"
                                            // }, {
                                            //     offset: 1,
                                            //     color: "#00FFA8"
                                            // }],
                                            colorStops: [
                                                {
                                                    offset: 0,
                                                    color: "#fff",
                                                },
                                                {
                                                    offset: 0.2,
                                                    color: "#fff",
                                                },
                                                {
                                                    offset: 0.5,
                                                    color: "#fff",
                                                },
                                                {
                                                    offset: 0.8,
                                                    color: "#fff",
                                                },
                                                {
                                                    offset: 1,
                                                    color: "#fff",
                                                },
                                            ],
                                        },
                                    },
                                },
                            },
                        ],
                    },
                ],
            };
            eventCharts.setOption(option);
            window.addEventListener("resize", () => {
                eventCharts.resize();
            });
        }
        //切换的曲线图
        let quxianChart1 = null;
        let quxianChart2 = null;
        let quxianChart3 = null;
        function drawQuxian1(id) {
            var dom = document.getElementById(id);
            quxianChart1 = echarts.init(dom);
            let color = [
                "#0090FF",
                "#36CE9E",
                "#FFC005",
                "#FF515A",
                "#8B5CFF",
                "#00CA69",
            ];
            let echartData = [
                {
                    name: "2018",
                    value1: 110,
                },
                {
                    name: "2019",
                    value1: 180,
                },
                {
                    name: "2020",
                    value1: 110,
                },
            ];
            let xAxisData = echartData.map((v) => v.name);
            //  ["1", "2", "3", "4", "5", "6", "7", "8"]
            let yAxisData1 = echartData.map((v) => v.value1);
            // [233, 233, 200, 180, 199, 233, 210, 180]
            const hexToRgba = (hex, opacity) => {
                let rgbaColor = "";
                let reg = /^#[\da-f]{6}$/i;
                if (reg.test(hex)) {
                    rgbaColor = `rgba(${parseInt(
                        "0x" + hex.slice(1, 3)
                    )},${parseInt("0x" + hex.slice(3, 5))},${parseInt(
                        "0x" + hex.slice(5, 7)
                    )},${opacity})`;
                }
                return rgbaColor;
            };
            let option = {
                color: color,
                legend: {
                    right: 10,
                    top: 10,
                    show: false,
                },
                tooltip: {
                    trigger: "axis",
                },
                grid: {
                    top: "20%",
                    bottom: "1%",
                    left: "2%",
                    right: "10%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                        axisLabel: {
                            formatter: "{value}",

                            color: "#fff",
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#1b4a6f",
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                type: "solid",
                                color: "#253a4e",
                            },
                            show: false,
                        },
                        data: xAxisData,
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "起",
                        axisLabel: {
                            color: "#fff",
                        },
                        nameTextStyle: {
                            color: "#fff",
                            fontSize: 10,
                        },
                        splitLine: {
                            lineStyle: {
                                type: "solid",
                                color: "#253a4e",
                            },
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                type: "solid",
                                color: "#1b4a6f",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: "",
                        type: "line",
                        smooth: true,
                        // showSymbol: false,/
                        symbolSize: 0,
                        zlevel: 3,
                        lineStyle: {
                            normal: {
                                color: color[0],
                                shadowBlur: 3,
                                shadowColor: hexToRgba(color[0], 0.5),
                                shadowOffsetY: 0,
                            },
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: hexToRgba(color[0], 0.8),
                                        },
                                        {
                                            offset: 1,
                                            color: hexToRgba(color[0], 0.1),
                                        },
                                    ],
                                    false
                                ),
                                // shadowColor: hexToRgba(color[0], 0.1),
                                // shadowBlur: 0
                            },
                        },
                        data: yAxisData1,
                    },
                ],
            };
            quxianChart1.setOption(option);
            window.addEventListener("resize", () => {
                quxianChart1.resize();
            });
        }
        function drawQuxian2(id) {
            var dom = document.getElementById(id);
            quxianChart2 = echarts.init(dom);
            let color = [
                "#0090FF",
                "#36CE9E",
                "#FFC005",
                "#FF515A",
                "#8B5CFF",
                "#00CA69",
            ];
            let echartData = [
                {
                    name: "2018",
                    value1: 110,
                },
                {
                    name: "2019",
                    value1: 180,
                },
                {
                    name: "2020",
                    value1: 110,
                },
            ];
            let xAxisData = echartData.map((v) => v.name);
            //  ["1", "2", "3", "4", "5", "6", "7", "8"]
            let yAxisData1 = echartData.map((v) => v.value1);
            // [233, 233, 200, 180, 199, 233, 210, 180]
            const hexToRgba = (hex, opacity) => {
                let rgbaColor = "";
                let reg = /^#[\da-f]{6}$/i;
                if (reg.test(hex)) {
                    rgbaColor = `rgba(${parseInt(
                        "0x" + hex.slice(1, 3)
                    )},${parseInt("0x" + hex.slice(3, 5))},${parseInt(
                        "0x" + hex.slice(5, 7)
                    )},${opacity})`;
                }
                return rgbaColor;
            };
            let option = {
                color: color,
                legend: {
                    right: 10,
                    top: 10,
                    show: false,
                },
                tooltip: {
                    trigger: "axis",
                },
                grid: {
                    top: "20%",
                    bottom: "1%",
                    left: "2%",
                    right: "10%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                        axisLabel: {
                            formatter: "{value}",

                            color: "#fff",
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#1b4a6f",
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                type: "solid",
                                color: "#253a4e",
                            },
                            show: false,
                        },
                        data: xAxisData,
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "个",

                        axisLabel: {
                            color: "#fff",
                        },
                        nameTextStyle: {
                            color: "#fff",
                            fontSize: 10,
                        },
                        splitLine: {
                            lineStyle: {
                                type: "solid",
                                color: "#253a4e",
                            },
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                type: "solid",
                                color: "#1b4a6f",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: "",
                        type: "line",
                        smooth: true,
                        // showSymbol: false,/
                        symbolSize: 0,
                        zlevel: 3,
                        lineStyle: {
                            normal: {
                                color: color[0],
                                shadowBlur: 3,
                                shadowColor: hexToRgba(color[0], 0.5),
                                shadowOffsetY: 0,
                            },
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: hexToRgba(color[0], 0.8),
                                        },
                                        {
                                            offset: 1,
                                            color: hexToRgba(color[0], 0.1),
                                        },
                                    ],
                                    false
                                ),
                                // shadowColor: hexToRgba(color[0], 0.1),
                                // shadowBlur: 0
                            },
                        },
                        data: yAxisData1,
                    },
                ],
            };
            quxianChart2.setOption(option);
            window.addEventListener("resize", () => {
                quxianChart2.resize();
            });
        }
        function drawQuxian3(id) {
            var dom = document.getElementById(id);
            quxianChart3 = echarts.init(dom);
            let color = [
                "#0090FF",
                "#36CE9E",
                "#FFC005",
                "#FF515A",
                "#8B5CFF",
                "#00CA69",
            ];
            let echartData = [
                {
                    name: "2018",
                    value1: 110,
                },
                {
                    name: "2019",
                    value1: 180,
                },
                {
                    name: "2020",
                    value1: 110,
                },
            ];
            let xAxisData = echartData.map((v) => v.name);
            //  ["1", "2", "3", "4", "5", "6", "7", "8"]
            let yAxisData1 = echartData.map((v) => v.value1);
            // [233, 233, 200, 180, 199, 233, 210, 180]
            const hexToRgba = (hex, opacity) => {
                let rgbaColor = "";
                let reg = /^#[\da-f]{6}$/i;
                if (reg.test(hex)) {
                    rgbaColor = `rgba(${parseInt(
                        "0x" + hex.slice(1, 3)
                    )},${parseInt("0x" + hex.slice(3, 5))},${parseInt(
                        "0x" + hex.slice(5, 7)
                    )},${opacity})`;
                }
                return rgbaColor;
            };
            let option = {
                color: color,
                legend: {
                    right: 10,
                    top: 10,
                    show: false,
                },
                tooltip: {
                    trigger: "axis",
                },
                grid: {
                    top: "20%",
                    bottom: "1%",
                    left: "2%",
                    right: "10%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                        axisLabel: {
                            formatter: "{value}",

                            color: "#fff",
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#1b4a6f",
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                type: "solid",
                                color: "#253a4e",
                            },
                            show: false,
                        },
                        data: xAxisData,
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "个",

                        axisLabel: {
                            color: "#fff",
                        },
                        nameTextStyle: {
                            color: "#fff",
                            fontSize: 10,
                        },
                        splitLine: {
                            lineStyle: {
                                type: "solid",
                                color: "#253a4e",
                            },
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                type: "solid",
                                color: "#1b4a6f",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: "",
                        type: "line",
                        smooth: true,
                        // showSymbol: false,/
                        symbolSize: 0,
                        zlevel: 3,
                        lineStyle: {
                            normal: {
                                color: color[0],
                                shadowBlur: 3,
                                shadowColor: hexToRgba(color[0], 0.5),
                                shadowOffsetY: 0,
                            },
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: hexToRgba(color[0], 0.8),
                                        },
                                        {
                                            offset: 1,
                                            color: hexToRgba(color[0], 0.1),
                                        },
                                    ],
                                    false
                                ),
                                // shadowColor: hexToRgba(color[0], 0.1),
                                // shadowBlur: 0
                            },
                        },
                        data: yAxisData1,
                    },
                ],
            };
            quxianChart3.setOption(option);
            window.addEventListener("resize", () => {
                quxianChart3.resize();
            });
        }
        function eventThreeHandle(index) {
            currentEventIndex.value = index;

            if (index == 0) {
                drawQuxian1("ZdEvents");
            } else if (index == 1) {
                drawQuxian2("SwPeople");
            } else if (index == 2) {
                drawQuxian3("JsTimes");
            }
        }
        // watch(()=>currentEventIndex.value,(newValue)=>{

        //     if(newValue==0){

        //         drawQuxian("ZdEvents")
        //     }else if(newValue==1){

        //         drawQuxian("SwPeople")
        //     }else if(newValue==2){

        //         drawQuxian("JsTimes")
        //     }
        // })
        let people1 = ref("");
        let people2 = ref("");
        let people3 = ref("");
        let people11 = ref("");
        let people21 = ref("");
        let people31 = ref("");
        function getBQ() {
            let date = new Date();
            let day = date.getDate();

            axios.get("./data/dutyBeiqin202103.json").then((res) => {
                let data = res.data.data;

                data.forEach((item, index) => {
                    if (item.date == day) {
                        people1.value = item.manager;
                        people2.value = item.dutyLeader;
                        people3.value = item.dutyWorker;
                        people11.value = data[index + 1].manager;
                        people21.value = data[index + 1].dutyLeader;
                        people31.value = data[index + 1].dutyWorker;
                    }
                });
            });
        }
        let isBigScreen = ref(false);
        onMounted(() => {
            //饼图
            // drawEvents();
            //取消图
            // drawQuxian1("ZdEvents");
            //加载备勤数据
            getBQ();
            nextTick(() => {
                if (window.screen.width > 2880) {
                    isBigScreen.value = true;
                    drawQuxian2("SwPeople");
                    drawQuxian3("JsTimes");
                } else {
                    isBigScreen.value = false;
                }
            });
        });
        onBeforeUnmount(() => {
            if (eventCharts) {
                echarts.dispose(eventCharts);
            }
            if (quxianChart1) {
                echarts.dispose(quxianChart1);
            }
            if (quxianChart2) {
                echarts.dispose(quxianChart2);
            }
            if (quxianChart3) {
                echarts.dispose(quxianChart3);
            }
        });

        return {
            numList,
            rightBtn,
            carouselList,
            options,
            optionValue,
            sjbqTitle,
            currentIndex,
            sjbqHandleClick,
            sjbqTitle1,
            currentIndex1,
            sjbqHandleClick1,
            todayHandleClick,
            todayIndex,
            todayList,
            title,
            eventList,
            eventThreeHandle,
            currentEventIndex,
            people1,
            people2,
            people3,
            people11,
            people21,
            people31,
            isBigScreen,
        };
    },
};
</script>
<style>
/* 031D2B */
.geoIntroTf .el-select__popper.el-popper[role="tooltip"] {
    background: #031d2b;
}
.geoIntroTf .inputRightYear .el-input__inner {
    height: 35px !important;
}
.geoIntroTf .el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
    background: #06c8ff;
    color: #08434c;
}
.geoIntroTf .inputRightYear .el-input__inner {
    background: #031c23;
    border: 1px solid #08434c;
    color: #fff;
}
.inputRightYear .el-input__inner::-webkit-input-placeholder {
    color: #fff;
}
.inputRightYear {
    position: absolute;
    right: 0;
    top: -10px;
    width: 126px;
}
</style>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .rightFx {
        .todayDuty {
            margin-top: vh(14);
            margin-bottom: vh(14);
            padding-top: vh(12);
            // border: 1px solid #063F61;
            background: #061721;
            height: vh(100);
            position: relative;
            background: url('/data/images/hngk/sjbqd.png') no-repeat;
            background-size: 100% 100%;

            .dutyTitle {
                text-align: center;
                color: rgba(255, 194, 46, 1);
                font-size: vw(14);
                margin-bottom: vh(15);
            }

            .dutyLoader {
                padding-left: vw(21);
                display: flex;

                div:nth-child(1) {
                    font-size: vw(14);
                    margin-right: vw(58);

                    span:nth-child(2) {
                        color: rgba(255, 197, 58, 1);
                    }
                }

                div:nth-child(2) {
                    font-size: vw(14);

                    span:nth-child(2) {
                        color: rgba(255, 197, 58, 1);
                    }
                }
            }

            .dutyPerson {
                padding-left: vw(21);
                margin-top: vh(15);
                font-size: vw(14);
            }

            .selectContent {
                position: absolute;
                right: 0;
                bottom: v;
                width: vw(85);
                height: vh(23);
            }
        }

        #dutyChart {
            width: vw(364);
            height: vh(130);
        }

        .typhoon {
            display: flex;
            width: vw(364);
            height: vh(90);
            margin-top: vh(20);

            .typhoonDec {
                flex-shrink: 0;
                width: vw(110);
                height: vh(90);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                font-size: vw(16);
                margin-top: vh(30);

                div:nth-child(1) {
                    color: #fff;
                    letter-spacing: 1px;
                    padding-top: vh(15);
                }

                div:nth-child(2) {
                    color: rgba(0, 138, 255, 1);
                    font-size: vw(30);
                }
            }

            #typhoonTimes {
                flex-shrink: 0;
                width: vw(254);
                height: vh(150);
            }
        }

        .rR {
            .geoIntroTf {
                width: vw(365);
                margin-top: vh(28);
                position: relative;

                .geoIntroTitle {
                    margin-bottom: vh(13);
                    display: flex;

                    .sideLine {
                        width: vw(2);
                        height: vh(15);
                        margin-right: vw(10);
                        background: #86ceeb;
                    }

                    .geoIntroWord {
                        color: #00EAFF;
                        font-size: vw(16);
                    }
                }

                .geoCarousel {
                    width: vw(365);
                    height: vh(172);
                    border: 1px solid #0c4259;
                    padding-top: vh(8);
                    padding-left: vw(8);

                    .carouseContent {
                        display: flex;

                        .carouseImg {
                            flex-shrink: 0;
                            width: vw(163);
                            height: vh(135);
                            margin-right: vw(12);
                            border: 1px solid #ddd;
                        }

                        .carouseWord {
                            flex-shrink: 0;
                            width: vw(168);
                            height: vh(139);
                            padding: vh(12) vw(0);
                            line-height: vh(17);
                        }
                    }
                }
            }

            #eventChart {
                width: vw(364);
                height: vh(180);
            }

            .threeTitles {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                align-items: center;
                padding-top: vh(10);
                padding-bottom: vh(10);

                div:nth-child(1) {
                    flex-shrink: 0;
                    width: 70%;
                    text-align: center;
                    line-height: vh(25);
                    margin-bottom: vh(10);
                    line-height: vh(28);
                    font-size: vw(13);
                    cursor: pointer;
                    color: #fff;
                    background: url('/data/images/hngk/sjbqx.png') no-repeat;
                    background-size: 100% 100%;
                }

                div:nth-child(2) {
                    flex-shrink: 0;
                    width: 40%;
                    line-height: vh(25);
                    text-align: center;
                    line-height: vh(28);
                    font-size: vw(13);
                    cursor: pointer;
                    color: #fff;
                    background: url('/data/images/hngk/sjbqx.png') no-repeat;
                    background-size: 100% 100%;
                }

                div:nth-child(3) {
                    flex-shrink: 0;
                    width: 40%;
                    line-height: vh(25);
                    text-align: center;
                    line-height: vh(28);
                    font-size: vw(13);
                    cursor: pointer;
                    color: #fff;
                    background: url('/data/images/hngk/sjbqx.png') no-repeat;
                    background-size: 100% 100%;
                }

                .sActive {
                    color: rgba(0, 234, 255, 1) !important;
                }
            }

            .event {
                display: flex;
                margin-top: vh(20);

                .eventDec {
                    flex-shrink: 0;
                    width: vw(84);
                    height: vh(90);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    font-size: vw(16);
                    margin-top: vh(30);

                    div:nth-child(1) {
                        color: #fff;
                        letter-spacing: 1px;
                        padding-top: vh(15);
                    }

                    div:nth-child(2) {
                        color: rgba(69, 206, 132, 1);
                        font-size: vw(30);
                    }
                }

                #ZdEvents {
                    flex-shrink: 0;
                    width: vw(280);
                    height: vh(150);
                    font-size: vw(30);
                }

                #SwPeople {
                    flex-shrink: 0;
                    width: vw(280);
                    height: vh(150);
                    font-size: vw(30);
                }

                #JsTimes {
                    flex-shrink: 0;
                    width: vw(280);
                    height: vh(150);
                    font-size: vw(30);
                }
            }
        }
        .btn{
            position:fixed;
            top:vh(160);
            right:vw(20);
            // background:pink
        }
        #buildChart {
            width: 100%;
            height: vh(204);
            margin-top: vh(10);
        }

        .sjbqContent1 {
            width: 100%;
            height: vh(101);
            background: url('/data/images/hngk/sjbqd.png') no-repeat;
            background-size: 100% 100%;
            padding: vh(10) vw(23);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            position: relative;

            div {
                width: vw(148);
                height: vh(28);
                line-height: vh(28);
                font-size: vw(13);
                cursor: pointer;
                color: #fff;
                background: url('/data/images/hngk/sjbqx.png') no-repeat;
                background-size: 100% 100%;
                text-align: center;
            }

            div:nth-child(1) {
                position: absolute;
                right: vw(5);
                top: vh(-35);
                background: none;
                border: 1px solid #0F77A3;
            }

            .sjbqActive {
                color: rgba(0, 234, 255, 1);
            }
        }

        .sjbqContent {
            width: 100%;
            height: vh(101);
            background: url('/data/images/hngk/sjbqd.png') no-repeat;
            background-size: 100% 100%;
            padding: vh(10) vw(23);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            position: relative;

            div {
                width: vw(148);
                height: vh(28);
                line-height: vh(28);
                font-size: vw(13);
                cursor: pointer;
                color: #fff;
                background: url('/data/images/hngk/sjbqx.png') no-repeat;
                background-size: 100% 100%;
                text-align: center;
            }

            .sjbqActive {
                color: rgba(0, 234, 255, 1);
            }
        }

        .geoIntro {
            width: vw(365);
            margin-top: vh(25);
            position: relative;

            .geoIntroTitle {
                margin-bottom: vh(13);
                display: flex;

                .sideLine {
                    width: vw(2);
                    height: vh(15);
                    margin-right: vw(10);
                    background: #86ceeb;
                }

                .geoIntroWord {
                    color: #00EAFF;
                    font-size: vw(16);
                }
            }

            .geoCarousel {
                width: vw(365);
                height: vh(172);
                border: 1px solid #0c4259;
                padding-top: vh(8);
                padding-left: vw(8);

                .carouseContent {
                    display: flex;

                    .carouseImg {
                        flex-shrink: 0;
                        width: vw(163);
                        height: vh(135);
                        margin-right: vw(12);
                        border: 1px solid #ddd;
                    }

                    .carouseWord {
                        flex-shrink: 0;
                        width: vw(168);
                        height: vh(139);
                        padding: vh(12) vw(0);
                        line-height: vh(17);
                    }
                }
            }
        }

        .geoIntro1 {
            width: vw(365);
            margin-top: vh(15);
            display: flex;
            justify-content: space-between;

            .geoIntroTitle {
                margin-bottom: vh(10);
                display: flex;

                .sideLine {
                    width: vw(2);
                    height: vh(15);
                    margin-right: vw(10);
                    background: #86ceeb;
                }

                .geoIntroWord {
                    color: #00EAFF;
                    font-size: vw(16);
                }
            }

            .todayTudy {
                width: vw(134);
                height: vh(25);
                line-height: vh(25);
                font-size: vw(12);
                display: flex;
                cursor: pointer;

                div {
                    flex: 1;
                    border: 1px solid #083D53;
                    text-align: center;
                    background: #012332;
                }

                .todayActive {
                    background: #023850;
                    border: 1px solid #0F77A3;
                }
            }
        }
    }
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .rightFx {
        // position:absolute;
        // top:vh(110);
        margin-top:vh(70);
        margin-left:vw1(37);
        // left:vw1(37);
        .todayDuty {
            // margin-top: vh(20);
            // margin-bottom: vh(14);
            padding-top: vh(12);
            border: 1px solid #063F61;
            background: url('/data/images/hngk/sjbqx.png') no-repeat;
            background-size: 100% 100%;
            height: vh(230);
            position: relative;
            width: vw1(420);
            .dutyTitle {
                text-align: center;
                color: rgba(255, 194, 46, 1);
                font-size: vw1(18);
                margin-bottom: vh(30);
            }

            .dutyLoader {
                padding-left: vw1(21);
                display: flex;

                div:nth-child(1) {
                    font-size: vw1(16);
                    margin-right: vw1(58);

                    span:nth-child(2) {
                        color: rgba(255, 197, 58, 1);
                    }
                }

                div:nth-child(2) {
                    font-size: vw1(16);

                    span:nth-child(2) {
                        color: rgba(255, 197, 58, 1);
                    }
                }
            }

            .dutyPerson {
                padding-left: vw1(21);
                margin-top: vh(30);
                font-size: vw1(16);
            }

            .selectContent {
                position: absolute;
                right: 0;
                bottom: v;
                width: vw1(85);
                height: vh(23);
            }
        }

        .typhoon {
            display: flex;
            width: vw1(364);
            height: vh(90);
            margin-top: vh(20);

            .typhoonDec {
                flex-shrink: 0;
                width: vw1(110);
                height: vh(90);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                font-size: vw1(16);
                margin-top: vh(30);

                div:nth-child(1) {
                    color: #fff;
                    letter-spacing: 1px;
                    padding-top: vh(15);
                }

                div:nth-child(2) {
                    color: rgba(0, 138, 255, 1);
                    font-size: vw1(30);
                }
            }

            #typhoonTimes {
                flex-shrink: 0;
                width: vw1(254);
                height: vh(150);
            }
        }

        #dutyChart {
            width: vw1(364);
            height: vh(130);
        }

        .rR {
            position: absolute;
            top: vh(110);
            right: 0;
            .geoIntroTf {
                width: vw1(411);
                margin-top: vh(28);
                position: relative;

                .geoIntroTitle {
                    margin-bottom: vh(13);
                    display: flex;

                    .sideLine {
                        width: vw1(2);
                        height: vh(15);
                        margin-right: vw1(10);
                        background: #86ceeb;
                    }

                    .geoIntroWord {
                        color: #00EAFF;
                        font-size: vw1(16);
                    }
                }

                .geoCarousel {
                    width: vw1(411);
                    height: vh(172);
                    border: 1px solid #0c4259;
                    padding-top: vh(8);
                    padding-left: vw1(8);

                    .carouseContent {
                        display: flex;

                        .carouseImg {
                            flex-shrink: 0;
                            width: vw1(163);
                            height: vh(135);
                            margin-right: vw1(12);
                            border: 1px solid #ddd;
                        }

                        .carouseWord {
                            flex-shrink: 0;
                            width: vw1(168);
                            height: vh(139);
                            padding: vh(12) vw1(0);
                            line-height: vh(17);
                        }
                    }
                }
            }

            #eventChart {
                width: vw1(364);
                height: vh(250);
            }

            .threeTitles {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                align-items: center;
                padding-top: vh(10);
                padding-bottom: vh(10);
                display: none;

                div:nth-child(1) {
                    flex-shrink: 0;
                    width: 70%;
                    text-align: center;
                    line-height: vh(25);
                    margin-bottom: vh(10);
                    line-height: vh(28);
                    font-size: vw1(13);
                    cursor: pointer;
                    color: #fff;
                    background: url('/data/images/hngk/sjbqx.png') no-repeat;
                    background-size: 100% 100%;
                }

                div:nth-child(2) {
                    flex-shrink: 0;
                    width: 40%;
                    line-height: vh(25);
                    text-align: center;
                    line-height: vh(28);
                    font-size: vw1(13);
                    cursor: pointer;
                    color: #fff;
                    background: url('/data/images/hngk/sjbqx.png') no-repeat;
                    background-size: 100% 100%;
                }

                div:nth-child(3) {
                    flex-shrink: 0;
                    width: 40%;
                    line-height: vh(25);
                    text-align: center;
                    line-height: vh(28);
                    font-size: vw1(13);
                    cursor: pointer;
                    color: #fff;
                    background: url('/data/images/hngk/sjbqx.png') no-repeat;
                    background-size: 100% 100%;
                }

                .sActive {
                    color: rgba(0, 234, 255, 1) !important;
                }
            }

            .event {
                display: flex;
                margin-top: vh(20);

                .eventDec {
                    flex-shrink: 0;
                    width: vw1(84);
                    height: vh(90);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    font-size: vw1(16);
                    margin-top: vh(30);

                    div:nth-child(1) {
                        color: #fff;
                        letter-spacing: 1px;
                        padding-top: vh(15);
                    }

                    div:nth-child(2) {
                        color: rgba(69, 206, 132, 1);
                        font-size: vw1(30);
                    }
                }

                #ZdEvents {
                    flex-shrink: 0;
                    width: vw1(280);
                    height: vh(190);
                    font-size: vw1(30);
                }

                #SwPeople {
                    flex-shrink: 0;
                    width: vw1(280);
                    height: vh(190);
                    font-size: vw1(30);
                }

                #JsTimes {
                    flex-shrink: 0;
                    width: vw1(280);
                    height: vh(190);
                    font-size: vw1(30);
                }
            }
        }

        #buildChart {
            width: 100%;
            height: vh(204);
            margin-top: vh(10);
        }
         .btn{
            position:fixed;
            top:vh(90);
            right:vw1(1000);
            // background:pink
        }
        .sjbqContent1 {
            width: vw1(420);
            height: vh(230);
            background: url('/data/images/hngk/sjbqd.png') no-repeat;
            background-size: 100% 100%;
            padding: vh(10) vw1(23);
            box-sizing:border-box;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            position: relative;
            margin-top: vh(30);
            // margin-bottom: vh(50);
            // background:pink;
            div {
                width: vw1(166);
                height: vh(60);
                line-height: vh(60);
                font-size: vw1(18);
                cursor: pointer;
                color: #fff;
                background: url('/data/images/hngk/sjbqx.png') no-repeat;
                background-size: 100% 100%;
                text-align: center;
            }

            div:nth-child(1) {
                position: absolute;
                right: vw1(5);
                top: vh(-65);
                background: none;
                border: 1px solid #0F77A3;
                width: vw1(166);
                height: vh(50);
                line-height:vh(50);
            }

            .sjbqActive {
                color: rgba(0, 234, 255, 1);
            }
        }

        .sjbqContent {
            width: vw1(420);
            height: vh(230);
            margin-top: vh(30);
            background: url('/data/images/hngk/sjbqd.png') no-repeat;
            background-size: 100% 100%;
            padding: vh(10) vw1(23);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            position: relative;

            div {
                width: vw1(166);
                height: vh(60);
                line-height: vh(60);
                font-size: vw1(18);
                cursor: pointer;
                color: #fff;
                background: url('/data/images/hngk/sjbqx.png') no-repeat;
                background-size: 100% 100%;
                text-align: center;
            }

            .sjbqActive {
                color: rgba(0, 234, 255, 1);
            }
        }

        .geoIntro {
            width: vw1(411);
            margin-top: vh(40);
            position: relative;
            .geoIntroTitle {
                margin-bottom: vh(13);
                display: flex;
                .sideLine {
                    width: vw1(2);
                    height: vh(15);
                    margin-right: vw1(10);
                    background: #86ceeb;
                }

                .geoIntroWord {
                    color: #00EAFF;
                    font-size: vw1(16);
                }
            }

            .geoCarousel {
                width: vw1(411);
                height: vh(172);
                border: 1px solid #0c4259;
                padding-top: vh(8);
                padding-left: vw1(8);

                .carouseContent {
                    display: flex;

                    .carouseImg {
                        flex-shrink: 0;
                        width: vw1(163);
                        height: vh(135);
                        margin-right: vw1(12);
                        border: 1px solid #ddd;
                    }

                    .carouseWord {
                        flex-shrink: 0;
                        width: vw1(168);
                        height: vh(139);
                        padding: vh(12) vw1(0);
                        line-height: vh(17);
                    }
                }
            }
        }

        .geoIntro1 {
            width: vw1(411);
            margin-top: vh(25);
            display: flex;
            justify-content: space-between;

            .geoIntroTitle {
                margin-bottom: vh(10);
                display: flex;

                .sideLine {
                    width: vw1(2);
                    height: vh(15);
                    margin-right: vw1(10);
                    background: #86ceeb;
                }

                .geoIntroWord {
                    color: #00EAFF;
                    font-size: vw1(16);
                }
            }

            .todayTudy {
                width: vw1(134);
                height: vh(25);
                line-height: vh(25);
                font-size: vw1(14);
                display: flex;
                cursor: pointer;
                div {
                    flex: 1;
                    border: 1px solid #083D53;
                    text-align: center;
                    background: #012332;
                }

                .todayActive {
                    background: #023850;
                    border: 1px solid #0F77A3;
                }
            }
        }
    }
}
</style>